<template>
	<view class="entertain">
		<xbd-page-card>
			<template>
				<view class="card">
					<xbd-image-title title="小保当财务报销上报" :image="require('@/static/image/supervision/wait.png')">
						<template>
							<view class="report" @click="record">
								<image src="@/static/image/supervision/icon5.png"></image> 上报记录
							</view>
						</template>
					</xbd-image-title>
					<view class="tag" style="color: #A0A7B8;">
						提交人
					</view>
					<view class="text">
						{{userInfo.name}}
					</view>
					<view class="tag" style="color: #A0A7B8;">
						所在单位
					</view>
					<view class="text">
						{{userInfo.department}}
					</view>
					<view class="tag">
						<text style="color:#FC4F4F">*</text>报销金额（元）
					</view>
					<view class="box">
						<view class="left">
							工程款报销
						</view>
						<view class="type">
							<uni-easyinput v-model="engineeing" :inputBorder="false" maxlength="12" type="text" placeholderStyle="font-size:30rpx;color:#A0A7B8;" placeholder="请输入" />
						</view>
					</view>
					<view class="box">
						<view class="left">
							借款报销
						</view>
						<view class="type">
							<uni-easyinput v-model="lend" :inputBorder="false" maxlength="12" type="text" placeholderStyle="font-size:30rpx;color:#A0A7B8;" placeholder="请输入" />
						</view>
					</view>
					<view class="box">
						<view class="left">
							差旅报销
						</view>
						<view class="type">
							<uni-easyinput v-model="travel" :inputBorder="false" maxlength="12" type="text" placeholderStyle="font-size:30rpx;color:#A0A7B8;" placeholder="请输入" />
						</view>
					</view>
					<view class="tag" style="margin-top:30rpx;">
						<text style="color:#FC4F4F">*</text>费用报销单及相关单据
					</view>
					<view class="image">
						<view class="box-image" v-for="(item,index) in upImg" :key="index">
							<image class="del" src="@/static/image/del.png" @click="del(item)"></image>
							<image class="images" :src="item" @click="image_click(item)"></image>
						</view>
						<view v-if="upImg.length !==6" class="upload" @click="choose_image">
							<image src="@/static/image/supervision/upload.png" mode=""></image>
							<view class="">
								上传图片
							</view>
						</view>
					</view>
				</view>
			</template>
		</xbd-page-card>
		<xbd-button text="提交" @clickBtn="submit()"></xbd-button>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import {
		Supervision
	} from '@/api/index.js';
	export default {
		name: "entertain",
		data() {
			return {
				flag:true,
				engineeing:'',
				lend:'',
				travel:'',
				num:'',
				upImg: [],
				data_image: [],
			}
		},
		computed: {
			...mapState(['userInfo'])
		},
		methods: {
			record(){
				uni.navigateTo({
				  url: `/pages/supervision/business/list?type=1`,
				});
				
			},
			del(val){
				console.log(val)
				this.upImg=this.upImg.filter(item => {
				 return	item !== val
				})
			},
			image_click(img) {
					// 点击预览图片
					dd.previewImage({
						current: 1,
						urls: [img],
					});
					console.log(img, 'img')
				},
				choose_image() {
					uni.chooseImage({
						count:  6 - this.upImg.length,
						success: (chooseImageRes) => {
							const tempFilePaths = chooseImageRes.tempFilePaths;
							// console.log(chooseImageRes, 'chooseImageRes.tempFilePaths;')
							for (let i = 0; i < tempFilePaths.length; i++) {
								uni.uploadFile({
									url: 'http://113.135.192.25:18398/api/upload', //仅为示例，非真实的接口地址  后期接口变更需调整
									header: {
										'Content-Type': 'multipart/form-data',
										'Authorization': uni.getStorageSync("token")
									},
									filePath: tempFilePaths[i],
									fileType: 'image',
									name: 'file',
									success: (uploadFileRes) => {
										if (this.upImg.indexOf(JSON.parse(uploadFileRes.data).data
												.url) == -1 && (JSON.parse(uploadFileRes.data).data.url
												.indexOf('.jpg') !== -1 || JSON.parse(uploadFileRes
													.data).data.url.indexOf('.png') !== -1|| JSON.parse(uploadFileRes.data).data.url.indexOf('.jpeg')!== -1)) {
											this.upImg.push(JSON.parse(uploadFileRes.data).data.url)
											const a = JSON.parse(uploadFileRes.data).data.url
												.substring(
													JSON.parse(uploadFileRes.data).data.url
													.lastIndexOf(
														"upload") + 7, JSON.parse(uploadFileRes.data)
													.data
													.url.length)
											this.data_image.push(a)
										}
									}
								});
							}

						}
					});
					// console.log(this.upImg)
				},
				submit(){
					console.log('提交')
					var reg = /^[0-9]*$/;
					if(this.engineeing === '' && this.lend === '' && this.travel === ''){
						return this.$showToast('报销金额：请填写内容');
					}else if(this.engineeing !== '' && !reg.test(this.engineeing)){
							return this.$showToast('工程款报销：请输入0或正整数');
					}else if(this.lend !== '' && !reg.test(this.lend)){
							return this.$showToast('借款报销：请输入0或正整数');
					}else if(this.travel !== '' && !reg.test(this.travel)){
						return this.$showToast('差旅报销：请输入0或正整数');
					}else if(+this.engineeing == 0 && +this.lend == 0 && +this.travel == 0){
						return this.$showToast('报销金额：至少一个不为0');
					}else if(this.upImg.length === 0){
						return this.$showToast('费用报销单及相关单据：请上传相关图片');
					}
					if(this.flag){
						this.flag=false
						this.report()
					}
				},
				async report(){
					let a = []
					
					a = this.upImg.map((item,index) => {
						let r = {
							name:this.data_image[index],
							url:item
						}
						return r
					})
					 const o = {
						 engineeing: +this.engineeing,
						 lend: +this.lend,
						 travel: +this.travel,
						 department: this.userInfo.department,
						 evidence:a,
					 }
					const res = await Supervision.postValueReport(o)
					if(res.success){
						uni.redirectTo({
						  url: `/pages/supervision/business/list?type=1`,
						});
					}else{
						this.flag=true
					}
					this.$showToast(res.msg);
				}
		}
	};
</script>

<style lang="scss" scoped>
	::v-deep .uni-easyinput__content-input{
		font-size: 30rpx;
	}
	.entertain {
		.card {
			.report{
				display: flex;
				align-items: center;
				box-sizing: border-box;
				padding: 10rpx 20rpx;
				height: 56rpx;
				width: 190rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: #000623;
				border: 2rpx solid #D0D6E5;
				border-bottom-left-radius: 30rpx;
				border-top-left-radius: 30rpx;
				margin-right: -32rpx;
				image{
					width: 28rpx;
					height: 28rpx;
				}
			}
			.tag {
				// color: #A0A7B8;
				font-size: 30rpx;
				margin-bottom: 20rpx;
			}

			.text {
				margin-top: 40rpx;
				font-size: 32rpx;
				font-weight: 400;
				color: #000623;
				margin-bottom: 40rpx;
			}
			.box{
				display: flex;
				align-items: center;
				.type{
					border-bottom: 2rpx solid #d0d6e5;
					margin-bottom: 20rpx;
				}
				.left{
					width: 180rpx;
					margin-right: 30rpx;
					font-size: 30rpx;
					text-align: left;
				}
			}
			.image {
				display: flex;
				flex-wrap: wrap;
				margin-bottom: 20rpx;
				margin-top: 50rpx;
				.box-image{
					position: relative;
				}
				.del{
					width: 38rpx;
					height: 38rpx;
					position: absolute;
					top: -16rpx;
					right: 4rpx;
				}
				.images {
					margin-right: 20rpx;
					width: 140rpx;
					height: 140rpx;
				}

				.upload {

					display: flex;
					justify-content: center;
					flex-direction: column;
					align-items: center;
					font-size: 20rpx;
					color: #A0A7B8;
					width: 140rpx;
					height: 140rpx;
					border: 2rpx dashed #d0d6e5;
					border-radius: 8rpx;
					line-height: normal;

					image {
						width: 28rpx;
						height: 28rpx;
						margin-right: 0;
						margin-bottom: 10rpx;
					}
				}
			}
		}
	}
</style>
